<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>关键词场景配置</title>
    <link rel="stylesheet" href="../../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css"
          th:href="@{/assert/css/plugin/chosen/chosen.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link href="../../../assert/css/animate.min.css" rel="stylesheet" th:href="@{/assert/css/animate.min.css}">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/toastr/toastr.min.css}">
    <link href="../../../assert/css/plugin/jsTree/themes/default/style.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/themes/default/style.css}">
    <link href="../../../assert/css/loaders.css" rel="stylesheet"
          th:href="@{/assert/css/loaders.css}">
    <link rel="stylesheet" href="../../../assert/css/bootstrapValidator.css"
          th:href="@{/assert/css/bootstrapValidator.css}"/>
    <link rel="stylesheet" href="../../../assert/css/jquery-ui.css" th:href="@{/assert/css/jquery-ui.css}"/>
    <link href="../../../assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/styles/jqx.base.css" rel="stylesheet"
          th:href="@{/assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/styles/jqx.base.css}"/>
    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>
    <style>
        .search_group label.control-label{
            width:85px;
        }
    </style>
</head>
<body>
<a id="basePath" th:href="@{/}"></a>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="tools_bar">
            <div class="pull-left">
                <a href="#" class="btn btn-default active" id="btnSearch" title="隐藏查询条"><i class="fa fa-filter"></i> 隐藏</a>
                <a href="#" class="btn btn-default active" id="refresh"><i class="fa fa-refresh"></i> 刷新</a>
                <a href="#" class="btn btn-default active" id="btnStart"><i class="fa fa-cog"></i>
                    设置</a>
                <a href="#" class="btn btn-default active" id="btnStop"><i class="fa fa-trash"></i>
                    解除</a>
            </div>
        </div>
        <div class="search on">
            <div class="search_group">
                <label class="control-label">业务分类：</label>
                <div class="control-inline">
                    <input type="text" id="serviceClassify" value="" class="form-control search_input" autocomplete="off">
                    <div class="downList scrollbar" style="display: none">
                        <div id="jstree"></div>
                    </div>
                </div>
            </div>
            <div class="search_group">
                <label class="control-label">场景：</label>
                <div class="control-inline">
                    <select type="text" id="scene" value="" class="form-control search_input" style="width:150px;"></select>
                </div>
            </div>
            <div class="search_group">
                <label class="control-label">关键场景：</label>
                <div class="control-inline">
                    <select type="text" id="proStatus" value="" class="form-control search_input"></select>
                </div>
            </div>

            <div class="search_group">
                <label class="control-label">设置时间：</label>
                <div class="control-inline">
                    <input placeholder="开始日期" class="form-control layer-date search_input" id="start1" autocomplete="off"> -
                    <input placeholder="结束日期" class="form-control layer-date search_input" id="end1" autocomplete="off">
                </div>
            </div>

            <div class="search_group">
                <button id="search" class="btn  btn-primary">查询</button>
                <button id="reset" class="btn  btn-default">重置</button>
                <button id="export" class="btn  btn-default">导出</button>
            </div>
        </div>
        <table id="myTable"></table>
    </div>
</div>
<!--设置解除确认框-->
<div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">设置</h4>
                </div>
                <div class="modal-body">
                    <div style="text-align: center"><span class="fa fa-question-circle"></span><span
                            id="setName"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="setBtn">确定</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>

<input type="text" id="classify" class="hidden">
<input type="text" id="proSelectModal" class="hidden">
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../../assert/js/bootstrapValidator.js" th:src="@{/assert/js/bootstrapValidator.js}"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"
        th:src="@{/assert/js/plugin/toastr/toastr.min.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/jquery-ui.min.js" th:src="@{/assert/js/jquery-ui.min.js}"></script>
<script src="../../../assert/js/plugin/layer/laydate/laydate.js"
        th:src="@{/assert/js/plugin/layer/laydate/laydate.js}"></script>
<script src="../../../assert/js/changeTime.js" th:src="@{/assert/js/changeTime.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"
        th:src="@{/assert/js/plugin/jsTree/jstree.min.js}"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js"
        th:src="@{/assert/js/plugin/chosen/chosen.jquery.js}"></script>
<script src="../../../assert/js/common.js" th:src="@{/assert/js/common.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/jqx-all.js"
        th:src="@{/assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/jqx-all.js}"></script>
<script>
    //项目名称
    var basePath = $("#basePath").attr("href");
    var json = [];
    //    页面主表格
    var TableInit = function () {
        var oTableInit = new Object();
        var url = basePath + "/rest/per-task/get-data-list";
        //初始化Table
        oTableInit.Init = function () {
            $('#myTable').bootstrapTable({
//                toolbar: '#tools_bar',                //工具按钮用哪个容器
//                data:json,
                url: url,         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                sortable: true,                     //是否启用排序
                sortName: "provinceCode", //排序方式
                sortOrder: "asc",
                pagination: true,    //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                responseHandler: function (res) {
                    if (res.code != 0) {
                        toastrCog.error(res.msg, 2000);
                    }
                    return {
                        "total": res.count,//总页数
                        "rows": res.data   //数据
                    };
                },
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,
                cellStyle: {
                    css: {"background-color": "#fff"}
                },//是否显示父子表
                columns: [
                    {
                        checkbox: true, // 显示一个勾选框
                        align: 'center' // 居中显示
                    },
                    {
                        align: "center",
                        halign: "center",
                        title: '序号',//标题  可不加
                        width: 60,
                        field: 'id',
                        formatter: function (value, row, index) {
                            var getOptions = $("#myTable").bootstrapTable('getOptions');
                            var pagenum = getOptions.pageNumber;
                            var pagesize = getOptions.pageSize;
                            var st = (pagenum - 1) * pagesize;
                            return (st + index + 1) + "";
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'provinceCode',
                        title: '分类',
                        sortable: true,
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'workName',
                        title: '关键场景',
                        sortable: true,
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'workName',
                        title: '关键场景',
                        sortable: true,
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'onsetTime',
                        title: '设置时间',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return dateFormatUtil(value);
                        }
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    if (!data.rows||data.rows.length == 0) {
                        var src=basePath+"/assert/image/nodata.png";
                        $("#myTable .no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                },
                onLoadError: function () {  //加载失败时执行
                    var src=basePath+"/assert/image/nodata.png";
                    $("#myTable .no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div>请稍等，数据正在加载中...</div>';
                },
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageNum: params.offset,   //页面大小
                pageSize: params.limit,
                sortName: this.sortName,
                sortOrder: this.sortOrder,
                provinceCode: $("#pro").val(),
                workId: $("#taskName").val(),
                workType: 1,
                createUserId:"1",
                proStatus: $("#proStatus").val(),
                callStartTime: $("#start1").val(),
                callEndTime: $("#end1").val(),
                onsetTimeBegin: $("#start").val(),
                onsetTimeEnd: $("#end").val()
            };
            return temp;
        };
        return oTableInit;
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            $(".ibox").width(winW - 20);
            $(".ibox").height(winH - 20);
        }
    };
    var tools = {
        modelSelectArr: [],
        stateArr: [
            {
                name: "全部",
                value: ""
            }
        ],
        sceneArr:[],//场景
        init: function () {
            tools.selectInit();//下拉框，日期插件初始化
            tools.tabSearch();//是否显示查询条
            tools.search();//查询
            tools.enterSearch();//查询
            tools.reset();//重置
            tools.refresh();//刷新
            tools.setModel();//设置关键词
            tools.removeModel();//解除关键词
            $("#serviceClassify").on("click", function () {
                $(this).next().show();
            }).on("blur", function () {
                var $this= $(this);
                setTimeout(function () {
                    $this.next().hide();
                }, 300);
            });
        },
        hideLabel:function(form,input){
            form.jqxValidator('hideHint', input);
        },
        selectInit: function () {
            bs.dataTime("#start1", "#end1");
            tools.getState();
            tools.getScene();
        },
        getScene:function(){
//            var dataArr =bs.getSenceData();
//            Object.assign(tools.sceneArr,dataArr);//es6复制数组的方法
            bs.selectDown($("#scene"), tools.sceneArr,"");
        },
        getState: function () {
            var dataArr = bs.getStatus("is_key_scene");
            Object.assign(tools.stateArr, dataArr);//es6复制数组的方法
            bs.selectDown($("#proStatus"), tools.stateArr);
        },
        tipShow: function () {
            $(".tipInput").hover(function () {
                $(this).find(".tip").removeClass("hidden")
            }, function () {
                $(this).find(".tip").addClass("hidden")
            })
        },
        tabSearch: function () {
            var search = $(".search");
            $("#btnSearch").on("click", function () {
                if (search.hasClass("on")) {
                    search.slideUp();
                    search.removeClass("on");
                    $("#btnSearch").html('<i class="fa fa-filter"></i> 查询').attr("title", "显示查询条");
                } else {
                    search.slideDown();
                    search.addClass("on");
                    $("#btnSearch").html('<i class="fa fa-filter"></i> 隐藏').attr("title", "隐藏查询条");
                }

            });
        },
        search: function () {
            $("#search").on("click", function () {
                tools.tableRefresh();
            })
        },
        enterSearch: function () {
            $("body").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    //此处编写用户敲回车后的代码
                    tools.tableRefresh();
                }
            })
        },
        tableRefresh: function () {
            $("#myTable").bootstrapTable('refresh');
        },
        reset: function () {
            $("#reset").on("click", function () {
                bs.resetSearch($(".search"));
                tools.tableRefresh();
            })
            $("#resetModel").on("click",function(){
                $("#classify").val("");
                $("#proSelectModal").val("");
                $("#jstree").jstree("deselect_all", true);
                $("#modelTableWin").bootstrapTable('refresh');
            })
        },
        resetSelect: function ($obj) {
            $obj.val("");
            $obj.trigger("chosen:updated");
        },
        refresh: function () {
            $("#refresh").on("click", function () {
                tools.tableRefresh();
            })
        },
        setModel: function () {
            $("#btnStart").on("click", function () {
                var selectArr = $("#myTable").bootstrapTable("getSelections");
                if (selectArr.length <= 0) {//如果没有选择任务数据
                    toastrCog.error("请选择要设置的数据！", 1000);
                }else {
                    $("#setModal").modal("show");
                    $("#setModal .modal-title").html("设置");
                    $("#setName").html(
                        "确定要设置所选的"+
                        "<span style='color:rgb(50, 136, 226)'>"+selectArr.length+"</span>"+
                        "个关键场景"+
                        "<span style='color:rgb(50, 136, 226)'>"+tools.getStr(selectArr,"workName")+"</span>吗？");
                    $("#setModal").attr("data-id",  tools.getStr(selectArr,"id"));
                    $("#setModal").attr("data-code", 1);
                }
            });
            $("#setBtn").on("click", function () {
                $("#setBtn").html("请求中...请稍后").prop("disabled",true);
                var id = $("#setModal").attr("data-id");
                var code = $("#setModal").attr("data-code");
                $.ajax({
                    type: "post",
                    url: basePath + "/rest/per-task/start-or-stop-task",
                    dataType: "json",
                    data: {
                        id: id,
                        startOrStop: code
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            tools.tableRefresh();
                            toastrCog.success(data.msg, 1000)
                        } else if (data.code == -1) {
                            toastrCog.error(data.msg, 2000)
                        } else {
                            toastrCog.warning(data.msg, 2000)
                        }
                        $("#startBtn").html("确定").prop("disabled",false);
                        $("#startModal").modal("hide");
                    }
                })
            });
        },
        removeModel: function () {
            $("#btnStop").on("click", function () {
                var selectArr = $("#myTable").bootstrapTable("getSelections");
                if (selectArr.length <= 0) {
                    toastrCog.error("请选择要解除的数据！", 1000);
                }else {
                    $("#setModal").modal("show");
                    $("#setModal .modal-title").html("解除");
                    $("#setName").html(
                        "确定要解除所选的"+
                        "<span style='color:rgb(50, 136, 226)'>"+selectArr.length+"</span>"+
                        "个关键场景"+
                        "<span style='color:rgb(50, 136, 226)'>"+tools.getStr(selectArr,"workName")+"</span>吗？");
                    $("#setModal").attr("data-id", tools.getStr(selectArr,"id"));
                    $("#setModal").attr("data-code", 0);
                }
            });
        },
        updataSelect: function ($obj, val) {
            $obj.val(val);
            $obj.trigger("chosen:updated");
        },
        getStr:function(selectArr,code){
            var str="";
            for (var i = 0; i < selectArr.length; i++) {
                str += selectArr[i][code] + ",";
            }
            str = str.substr(0, str.length - 1);
            return str;
        }
    };
    var draggables = { //模态框拖动
        init: function () {
            this.draggable($('#addModal'));
        },
        draggable: function (obj) {
            $(obj).draggable();
        }
    };
    var menuWork = {
        init: function (elem) {
            menuWork.render(elem);
            menuWork.changeMenu(elem);
            menuWork.search(elem);
        },
        data:null,
        render: function (elem) {
            var jstree = elem;
            jstree.jstree({
                "core": {
                    "animation": false,
                    "multiple": false,
                    "check_callback": true,
                    'data': function (obj, callback) {
                        var jsonstr = "[]";
                        var jsonarray = eval('(' + jsonstr + ')');
                        var arr1=[];
                        var data=[
                            {children: [], id: "投诉", text: "投诉"},
                            {children: [], id: "营销", text: "营销"},
                            {children: [], id: "咨询查询", text: "咨询查询"},
                            {children: [], id: "报障", text: "报障"}
                        ];
                        menuWork.data=data;
//                        $.ajax({
//                            type: "GET",
//                            url: basePath + 'rest/model/select/modelTypeTree',
//                            dataType: "json",
//                            async: false,
//                            success: function (data) {
//                                var result=data.data;
//                                if (result != null) {
//                                    var arr = [];
//                                    arr.push(result);
//                                    callback.call(this, menu.loopMenu(arr));
//                                }
//                            }
//                        });
                        jsonarray = menuWork.loopMenu(data);
                        callback.call(this, jsonarray);
                    }
                },
                "types": {
                    "default": {
                        "icon": "jstree-folder"
                    },
                    "html": {
                        "icon": "jstree-file"
                    }
                },
                "plugins": ["types", "search", "unique"]
            }).bind('loaded.jstree', function (e, data) {
                jstree.jstree("deselect_all", true);
                $("li[aria-selected='true']").click();
            })
        },
        rootLoopMenu:function(array,obj){
            if (array.length > 0) {
                var parentid=obj.parentid;
                for (var i = 0; i < array.length; i++) {
                    var code=0;
                    var id = array[i]["id"];
                    if(parentid==id){
                        array[i]["children"].push(obj);
                        return array;
                    }else{
                        code++;
                    }
                    if(code==array.length){
                        for(var j=0;j<code;j++){
                            menuWork.rootLoopMenu(array[j]["children"],obj);
                        }
                    }
                }
                return array;
            }
        },
        loopMenu: function (array) {
            if (array && array.length > 0) {
                for (var i = 0; i < array.length; i++) {
                    var children = array[i]["children"];
                    if (children.length <= 0) {
                        array[i].type = "html"
                    } else {
//                        if(i<=1){
                        array[i].state = {"opened": "true"}
//                        }
                    }
                    if (children) {
                        menuWork.loopMenu(children);
                    }
                }
                return array;
            }else{
                return []
            }
        },
        changeMenu: function (elem) {
            elem.on("changed.jstree", function (e, data) {
                if(data.selected<0){

                }else{
                    elem.parent().prev().val(data.node.text);
                }
            });
        },
        search: function (elem) {
            $("#searchMenu").on("click", function () {
                elem.jstree(true).search($(".search_box input").val());
            });
            $(".search_box input").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    elem.jstree(true).search($(".search_box input").val());
                }
            })
        },
    };
    $(function () {
        var oTable = new TableInit();
        oTable.Init();
        resize.init();
        tools.init();
        draggables.init();
        menuWork.init($("#jstree"));
    })
</script>
</body>
</html>